import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  List _images = [
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg',
  ];

  double _opacity = 0;

  _onScroll(offset) {
    print(offset);
    setState(() {
      double opacity = offset / 100;
      if (opacity < 0) {
        opacity = 0;
      } else if (opacity > 1) {
        opacity = 1;
      }
      _opacity = opacity;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MediaQuery.removePadding(
        // 手机顶部默认会预留一段安全距离这段安全距离可以通过这个组件去除
        removeTop: true,
        context: context,
        child: Stack(
          // Stack組件的children中前面的元素会被叠在下面
          children: <Widget>[
            NotificationListener(
              // 监听组件所有的滚动事件(这里包括轮播图和列表)的组件
              // ignore: missing_return
              onNotification: (scroll) {
                if (scroll is ScrollUpdateNotification && scroll.depth == 0) {
                  // 滚动且是ScrollUpdateNotification类型的时候其中scroll.depth == 0表示是深度第几个元素这里为ListView
                  _onScroll(scroll.metrics.pixels);
                }
              },
              child: ListView(
                children: <Widget>[
                  Container(
                    height: 200.0,
                    child: new Swiper(
                      itemCount: _images.length,
                      autoplay: true,
                      pagination: SwiperPagination(),
                      itemBuilder: (BuildContext context, int index) {
                        return Image.network(
                          _images[index],
                          fit: BoxFit.fill,
                        );
                      },
                    ),
                  ),
                  Container(
                    height: 800.0,
                    child: ListTile(
                      title: Text('哈哈'),
                    ),
                  ),
                ],
              ),
            ),
            Opacity(
              opacity: _opacity,
              child: Container(
                height: 80.0,
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.only(top: 20.0),
                    child: Text('首页'),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
